<template>
  <!-- <button class="reset" @click="resetMap1()">复位地图</button> -->
  <!-- 地图图层显示 -->
  <button class="image1" @click="mapShow1()">
    <img src="../../../images/image1.png" alt="" width="100" />
  </button>
  <button class="image2" @click="imageShow1()">
    <img src="../../../images/image2.png" alt="" width="100" />
  </button>
</template>

<script setup>
import { resetMap, imageShow, mapShow } from "./Hooks/index"
var map = ref()
var view = ref()
var zoom = ref()
var center = ref()
onMounted(() => {
  map = ref(useGlobalMap())
  view = map.value.getView()
  zoom = view.getZoom()
  center = view.getCenter()
})

//复位地图
const resetMap1 = () => {
  resetMap(view)
}

//控制地图矢量图层和影像图层显示
const mapShow1 = () => {
  mapShow(map)
}
const imageShow1 = () => {
  imageShow(map)
}
</script>

<style scoped>
@import url('./style/MapShow.css');
</style>
